<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>

<body>
	<script>
		// 响应式函数
		function reactive(obj, key, value) {
			Object.defineProperty(obj, key, {
				get() {
					console.log(`访问了${key}属性`)
					return value
				},
				set(val) {
					console.log(`将${key}由->${value}->设置成->${val}`)
					if (value !== val) {
						value = val
					}
				}
			})
		}


		const data = {
			name: '老陈',
			age: 22
		}

		var stars = ['赵丽颖', '古力娜扎', '迪丽热巴']
		Object.keys(data).forEach(key => reactive(data, key, data[key]))

		stars.forEach((item, i) => reactive(stars, i, stars[i]))

	</script>
</body>

</html>